AIUB Portal+ Chrome Extension

The Problem: A Functional Portal for Improvement

The official AIUB Student Portal provides the essential academic and administrative functionality students need, but many everyday workflows can become unnecessarily time-consuming.

Students frequently need to:

• Search through large lists of offered courses

• Compare sections manually

• Check whether courses conflict with each other

• Calculate and track academic progress

• Understand prerequisite requirements

• Navigate multiple pages for financial information

• Check notices separately

• Build their weekly routine manually

These tasks are particularly repetitive during course registration, when students need to make decisions quickly and avoid scheduling conflicts.

Instead of building an entirely separate student-management platform, I wanted to enhance the existing portal directly, preserving its underlying functionality while improving the experience around it.

The Solution

I built AIUB Portal+, a client-side Chrome extension that injects additional functionality and UI improvements directly into the existing AIUB Student Portal.

The extension provides a unified productivity layer on top of the portal, including:

• Advanced course filtering

• Automatic schedule clash detection

• Routine generation

• Grade and GPA analytics

• Prerequisite information

• Live AIUB notices

• Financial dashboard improvements

• Exam routine countdowns

• Redesigned registration experience

• Customizable feature toggles

• Modern navigation and UI components

• Offline CAPTCHA solving

The core idea was simple:

Keep the portal's existing functionality, but make everyday student workflows dramatically easier.

Extension Architecture

Unlike a traditional web application, AIUB Portal+ runs inside the user's browser and interacts with the existing portal through Chrome Extension APIs and client-side DOM manipulation.

A simplified architecture looks like:

                AIUB Student Portal
                        │
                        ▼
              Chrome Extension
                        │
              ┌─────────┴─────────┐
              │                   │
        Content Scripts       Extension UI
              │                   │
              ▼                   ▼
       Portal DOM / Data     Settings Dashboard
              │
      ┌───────┼────────┬─────────────┐
      ▼       ▼        ▼             ▼
   Filters  Clash    Analytics    UI Enhancements
            Engine
              │
              ▼
        Browser Storage

The extension operates primarily on the client side, allowing the user's portal data to remain within their browser.

Client-Side & Privacy-First Architecture

Privacy was one of the most important design decisions of the project.

Rather than creating a backend that receives and stores student information, the extension processes functionality directly inside the browser.

The architecture intentionally avoids:

• Backend servers

• Student-data databases

• User accounts

• Tracking systems

• External storage of personal information

Extension preferences are stored using Chrome's storage capabilities, while portal-related processing happens locally within the user's browser.

This architecture minimizes the amount of sensitive student information that needs to leave the user's device.

Advanced Course Filtering

Course registration often involves searching through many offered sections with different days, times, and statuses.

I implemented an advanced filtering system that allows students to narrow down courses based on criteria such as:

• Course

• Day

• Time

• Availability/status

• Section information

Instead of repeatedly scanning the entire course list manually, students can quickly narrow the results to the sections relevant to their schedule.

Smart Clash Detection

One of the most useful features is automatic schedule conflict detection.

Students traditionally need to compare the day and time of multiple course sections manually before making a selection.

AIUB Portal+ analyzes the selected courses and compares their schedules.

When a conflict is detected, incompatible sections can be dynamically disabled or highlighted.

This transforms course selection from a manual comparison process into a more guided scheduling workflow.

Automated Routine Generation

After selecting courses, students can generate a visual weekly routine automatically.

The extension transforms course information into a structured weekly schedule:

          SUN   MON   TUE   WED   THU
08:00
09:30
11:00       DS        DS
12:30
02:00              MAT         PHY
03:30

The generated routine can also be exported as a PNG image, making it easy for students to save or share their schedules.

Grade Analytics

The original portal provides academic results, but understanding long-term progress can require manually interpreting multiple semester results.

I added a dedicated grade-analysis layer with:

• Expandable course result cards

• Color-coded grade indicators

• Semester-wise GPA summaries

• Curriculum progress visualization

• GPA parsing

• Prerequisite dependency information

The goal was to transform raw academic data into information that is easier to understand at a glance.

Curriculum Progress

Instead of simply showing individual course results, the extension analyzes curriculum-related information to help students understand their overall academic progress.

Curriculum Progress

Completed ███████████████░░░░░ In Progress █████░░░░░░░░░░░░░░░ Remaining ████████░░░░░░░░░░░░

This provides students with a more visual representation of where they are within their degree.

Prerequisite Unlocker

For CSE students, I added a prerequisite visualization feature that analyzes prerequisite information and makes eligibility easier to understand.

Instead of forcing students to manually determine which courses they can take, the extension surfaces prerequisite relationships directly within the relevant portal interface.

The system can distinguish between courses that are available based on prerequisite requirements and courses that still have unmet dependencies.

Automated CAPTCHA Solving

Login workflows can require solving mathematical CAPTCHAs.

AIUB Portal+ includes an offline OCR-based CAPTCHA solver designed specifically for the portal's mathematical CAPTCHA format.

The processing happens locally inside the browser rather than sending CAPTCHA information to an external server.

This was particularly important from a privacy perspective while also reducing repetitive manual interaction during login.

Live AIUB Notices

I also integrated a live notice experience directly into the portal interface.

Instead of requiring students to separately visit the AIUB website to check announcements, the extension surfaces recent notices through a native-style notification interface.

The UI includes:

• Notice bell

• Unread indicators

• Latest notice retrieval

• Integrated notice presentation

The extension only displays notification indicators when there are relevant unread items, avoiding unnecessary visual noise.

Financial Dashboard

The extension also improves the financial section of the portal by transforming raw payment information into a more understandable dashboard.

The redesigned experience includes:

• Total charged

• Total paid

• Current balance

• Payment history

• Transaction information

• Payment status indicators

Payment states are visually separated into categories such as:

Success · Failed · Pending · Cancelled

The interface also improves currency presentation using the Bangladeshi Taka symbol (৳).

Registration Experience

Course registration is one of the most important workflows in the portal, so I redesigned several parts of the experience.

Improvements include:

• Modern course cards

• Semester switching

• Credit summaries

• Fee breakdowns

• Print shortcuts

• Improved payment-print interfaces

• Better section information

• Integrated clash detection

The objective was to make registration faster to understand and less error-prone.

Settings Dashboard

Because different students have different preferences, I built a dedicated settings dashboard that allows individual features to be enabled or disabled.

Users can customize which AIUB Portal+ features they want to use instead of being forced to use the entire enhancement layer.

Preferences are persisted through browser storage so the configuration can remain available across supported devices.

UI/UX Transformation

Beyond functionality, a major part of the project involved redesigning the portal interface.

I introduced:

• Modern navigation

• Collapsible sidebar

• Custom icons

• Hover interactions

• Improved profile page

• Gradient-based visual elements

• Glassmorphism-inspired components

• Better information hierarchy

• Modern notification UI

• Responsive layouts

The challenge was to modernize the visual experience without destroying the familiarity of the original portal.

The extension therefore works as a progressive enhancement layer rather than forcing users to learn an entirely new application.

Engineering Challenges

1. Working With an Existing Application

Unlike building a project from scratch, AIUB Portal+ had to work on top of an existing application whose UI structure and behavior were outside my direct control.

This required carefully identifying:

• Relevant DOM elements

• Page-specific structures

• Existing forms

• Tables

• Navigation elements

• Dynamic content

• User interactions

The extension had to enhance the portal without breaking its existing functionality.

2. Dynamic DOM Manipulation

Portal pages can change their content dynamically, meaning the extension cannot always assume that the required elements exist immediately after page load.

I implemented logic to detect and interact with relevant portal elements as they become available.

This was particularly important for features such as:

• Course filtering

• Clash detection

• UI injection

• Grade analytics

• Dashboard widgets

3. Keeping Extension State Consistent

The extension contains multiple independent features that interact with the same portal.

For example:

Course Selection
↓
Clash Detection
↓
Routine Generation
↓
Registration Workflow

Changes in one part of the interface therefore need to be reflected across other features without creating inconsistent state.

I designed the feature architecture so individual modules could operate independently while sharing the necessary application state.

Performance Considerations

Because the extension runs directly inside the student's browser, unnecessary processing could negatively affect the portal's performance.

I therefore focused on:

• Limiting DOM operations

• Avoiding unnecessary re-renders

• Processing data locally

• Running functionality only on relevant pages

• Separating feature modules

• Minimizing repeated calculations

The result is an enhancement layer that adds substantial functionality without turning the original portal into a heavy application.

The Result

AIUB Portal+ transformed the existing AIUB Student Portal into a much more productivity-focused academic workspace.

Instead of building another student portal from scratch, I engineered a browser extension capable of extending an existing production application with new functionality, analytics, automation, and a completely redesigned user experience.

The project gave me practical experience in:

• Chrome Extension development

• Browser APIs

• Client-side architecture

• DOM manipulation

• React and TypeScript

• State management

• OCR integration

• Data parsing

• Schedule algorithms

• Course conflict detection

• Academic data visualization

• Browser storage

• Privacy-focused application design

• Working with an existing third-party web application

Most importantly, the project demonstrates my ability to identify real user pain points and engineer practical solutions around an existing system, rather than simply building isolated applications from scratch.

Privacy by Design

AIUB Portal+ was intentionally designed around a privacy-first architecture.

No backend server.No student-data database.No account registration.No tracking.No personal-data collection.Local CAPTCHA processing.

The extension's goal is to make the portal more powerful while keeping the user's academic information inside their own browser wherever possible.

Project

AIUB Portal+

Type: Chrome Extension / Developer Tool

Platform: Google Chrome

Focus: Student Productivity & Academic Tools

Developed by: Md Rijoan Maruf